<template>
    <div>
        <h1>我的购物车</h1>
        <button @click="setZero">清空购物车</button>
        <ul>
            <li v-for="(item, index) of phone" :key="index">
                {{ item.good }}
                {{ item.price }}
                <counter 
                    :msg="item.count" 
                    :index="index"
                    @subCount="subCount"
                    @addCount="addCount"
                ></counter>
            </li>
        </ul>
        <p>
            总价为: {{ calcPrice() }}
        </p>
    </div>
</template>

<script>
import Counter from './Counter.vue';
import stores from '../../stores.js'

export default {
    data() {
        return {
            phone:stores.state,
        }
    },
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Cart",
    components: { Counter },
    methods: {
        subCount: function(index) {
            if(this.phone[index].count > 0) {
                this.phone[index].count--
            }
        },
        addCount: function(index) {
            this.phone[index].count++
        },
        calcPrice: function(){
            let total = 0;
            this.phone.map(v => {
                total += v.price * v.count
            })
            return total
        },
        // setZero: function(){
        //     this.phone.map(i => {
        //         i.count = 0;
        //     })
        // },
        setZero: function(){
            stores.setStateCount()
        },
    }
}
</script>

<style>
    
</style>